<template>
	<view class="index">
		<nav-bar title="我的点赞" isBack></nav-bar>
		<!-- 建党100周年主题 -->
		<view class="top-banner">
			<image src="https://cos.ryz1620.com/liankun/static/ddimg.jpg" mode="widthFix"></image>
		</view>
		<view class="box">
			<!-- 打卡日历  -->
			<view class="great-contant">
				<view class="info">
					<view class="item">
						<view class="title">您在本月点赞<text>{{cuntinueDays}}</text>天</view>
						<text>连续点赞有惊喜哦</text>
					</view>
					<view class="item">
						<view class="b">今日点赞获得总金额</view>
						<text class="title num">{{point||0.00}}</text>
					</view>
				</view>
				<view class="calendar">
					<!-- 切换年月 -->
					<view class="bar u-flex u-row-center">
						<view class="previous" @tap="handleCalendar(0)">
							<button class="u-reset-button bar-btn u-p-r-30"><u-icon name="arrow-left" size="28" color="#c4c4c4"></u-icon></button>
						</view>
						<view class="date">{{ cur_year || '--' }} 年 {{ cur_month || '--' }} 月</view>
						<view class="next" @tap="handleCalendar(1)">
							<button class="u-reset-button bar-btn u-p-l-30"><u-icon name="arrow-right" size="28" color="#c4c4c4"></u-icon></button>
						</view>
					</view>
				
					<!-- 显示星期 -->
					<view class="week u-flex">
						<view class="week-item u-flex u-row-center" v-for="(item, index) in weeks_ch" :key="index">{{ item }}</view>
					</view>
				
					<!-- 日历表 -->
					<view class="myDateTable">
						<view v-for="(item, j) in days" :key="j" class="dateCell u-flex u-row-center u-col-center">
							<!-- 空格 -->
							<view v-if="!item.date" class="cell"><text :decode="true">&nbsp;&nbsp;</text></view>
							<view v-else>
								<!-- 已点赞日期 -->
								<view v-if="item.is_sign" class="cell is-sign">
									<text>{{ item.day }}</text>
								</view>
								<!-- 未点赞日期 -->
								<view class="cell" v-else>
									<text>{{ item.day }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 点赞排行榜  -->
			<view class="rank-contant">
				<view class="title">
					<view class="ribbon">点赞排行榜</view>
				</view>
				<view class="i_content">
					<view class="i_cContain">
						<view class="i_cTabs">
							<view class="i_cTab" :class="{'active': sort === 'week'}" @tap="contentBannerToggle('week')">
								<view class="i_cTab-txt"><text>周榜</text></view>
							</view>
							<view class="i_cTab" :class="{'active': sort === 'moth'}" @tap="contentBannerToggle('moth')">
								<view class="i_cTab-txt"><text>月榜</text></view>
							</view>
						</view>
						<view class="i_cSwiper">
							<view class="top-box">
								<view class="item" v-for="(item,index) in loglist" :key="index" v-if="index<3">
									<view class="con">
										<view class="iconfont iconhuaban66"></view>
										<text class="digit">NO.{{index+1}}</text>
										<view class="avatar">
											<image :src="item.headimg"></image>
										</view>
										<view class="name ellipsis">{{item.nickname || '***'}}</view>
										<view class="text">点赞第<text>{{item.num}}</text>天</view>
									</view>
								</view>
							</view> 
							<view class="rank-list">
								<view class="item" v-for="(item,index) in loglist" :key="index" v-if="index>2">
									<view class="digit">{{index+1}}</view>
									<view class="user">
										<view class="avatar">
											<image :src="item.headimg"></image>
										</view>
										<view class="name ellipsis">{{item.nickname || '***'}}</view>
									</view>
									<view class="great">
										<view class="iconfont"></view>
										<view class="num">点赞<text>{{item.num}}</text>天</view>
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			
			</div>
		</view>
	</view>
</template>

<script>
	import service_now from '@/service/now.js'
	import navBar from "@/components/navBar/navBar.vue"
	export default {  
		components: { navBar },
		data() {
			return {
				contentIndex:0,
				days: [], //日历
				cuntinueDays: 0, //签到天数
				score: '', //签到获得的积分
				cur_year: 0, //当前选的年
				cur_month: 0, //当前选的月
				cur_day: 0, //当前选择的天
				today: parseInt(new Date().getDate()), //本日
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				toYear: parseInt(new Date().getFullYear()), //本年
				weeks_ch: ['日', '一', '二', '三', '四', '五', '六'], //星期
				isPresentMonth: false, //是否可签到
				isSign: false,
				showSign: false,
				point:"",
				sort:"week",
				loglist:[],
			};
		},
		onLoad() {
			this.$utils.getUrl()
			this.cur_year = this.toYear;
			this.cur_month = this.toMonth;
			this.cur_day = this.today;
			this.getSignList();
			this.geputList();
		},
		methods: {
			contentBannerToggle(name) {
				this.sort = name
				this.geputList();
			},
			// 当前签到记录
			getSignList() {
				let that = this;
				let month = that.cur_month < 10 ? '0' + that.cur_month : that.cur_month;
				let query = `${that.cur_year}-${month}`;
				service_now.gedate({
					month: query
				}).then(res => {
					if (res.code == 1) {
						let emptyDays = that.calculateEmptyGrids();
						that.cuntinueDays = res.data.cuntinue_days
						that.point = res.data.point
						that.days = [...emptyDays, ...res.data.days];
						that.selSign();
					}
				});
			},
			// 点赞排行
			geputList() {
				service_now.geputList({
					sort: this.sort
				}).then(res => {
					if (res.code == 1) {
						this.loglist = res.data
					}
				});
			},
			// 选中日期
			selSign() {
				let that = this;
				let selToday = `${that.toYear}-${that.toMonth.toString().padStart(2, '0')}-${that.today.toString().padStart(2, '0')}`;
				let newDay = `${that.cur_year}-${that.cur_month.toString().padStart(2, '0')}-${that.cur_day.toString().padStart(2, '0')}`;
				if (selToday === newDay) {
					let day = that.days.find(item => {
						return item.date === selToday;
					});
					that.isSign = day.is_sign;
				}
			},
			// 计算当月1号前空了几个格子
			calculateEmptyGrids() {
				let that = this;
				let emptyDays = [];
				const firstDayOfWeek = new Date(Date.UTC(that.cur_year, that.cur_month - 1, 1)).getDay();
				if (firstDayOfWeek > 0) {
					for (let i = 0; i < firstDayOfWeek; i++) {
						let obj = {
							day: null,
							is_sign: false
						};
						emptyDays.push(obj);
					}
				}
				return emptyDays;
			},
			// 切换控制年月，上一个月，下一个月
			handleCalendar(type) {
				const cur_year = parseInt(this.cur_year);
				const cur_month = parseInt(this.cur_month);
				let newMonth = cur_month;
				let newYear = cur_year;
				switch (type) {
					case 0:
						//上个月
						this.isPresentMonth = true;
						newMonth = cur_month - 1;
						if (newMonth < 1) {
							newYear = cur_year - 1;
							newMonth = 12;
						}
						if (newYear < this.toYear || (newYear === this.toYear && newMonth <= this.toMonth)) {
							this.isPresentMonth = false;
						}
						break;
					case 1:
						newMonth = cur_month + 1;
						if (newMonth > 12) {
							newYear = cur_year + 1;
							newMonth = 1;
						}
			
						if (newYear > this.toYear || (newYear === this.toYear && newMonth > this.toMonth)) {
							this.isPresentMonth = true;
						}
						break;
					default:
						break;
				}
				this.cur_year = newYear;
				this.cur_month = newMonth;
				this.getSignList();
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.index {
		background-color: #e90111;
	}
	.top-banner {
		overflow: hidden;
		position: relative;
		image {
			width: 100%;
		}
	}
	.box{
		background-image: linear-gradient(to bottom, #ef1d26, #ff6d56);
		padding: 0 28rpx;
	}
	.great-contant{
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx;
		
		.info{
			color: #e81923;
			display: flex;
			text-align: center;
			font-size: 25rpx;
			.item{
				flex: 1;
				&:nth-child(1){
					border-right:0.66rpx solid #fb7070;
				}
			}
			.title{
				font-weight: bold;
				font-size: 30rpx;
			}
		}
		.calendar{
			margin-top: 20rpx;
			
		}
	}
	.rank-contant{
		background-image: linear-gradient(to bottom, #e90310, #f7921e);
		.title{
			position: relative;
			.ribbon{
					display: block;
				    width: 366.66rpx;
				    height: 66.66rpx;
				    line-height: 66.66rpx;
				    text-align: center;
				    margin-left: -6.66rpx;
				    margin-right: -6.66rpx;
				    background-image: linear-gradient(to bottom, #faaf3c, #f46a29);
				    position: relative;
					top: -14rpx;
					border-radius: 0 0 20rpx 20rpx;
					left: 50%;
					transform: translate(-50%, 0);
					z-index: 1;
					color: #fff;
					font-size: 35rpx;
					font-weight: bold;
					
					&::before{ 
						content: "";
						position: absolute;
						height: 0;
						width: 0;
						border-bottom:20rpx solid #ea0411;
						border-right:20rpx solid transparent;
						top: 4rpx;
						left: -10rpx;
						transform:rotate(45deg);
					}
					&::after {
						content: "";
						position: absolute;
						height: 0;
						width: 0;
						border-bottom: 20rpx solid #ea0411;
						border-left: 20rpx solid transparent;
						top: 4rpx;
						right: -10rpx;
						transform:rotate(-45deg);
					}
				}
		}
		.i_cTabs{
			margin-top: 13.33rpx;
			border-bottom: 0.66rpx solid #fff;
			text-align: center;
			display: flex;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 35rpx;
			
			.i_cTab{
				flex: 1;
				color: #fad3d0;
				&.active{
					color: #fff;
				}
			}
		}
		.top-box{
			display: flex;
			justify-content: space-between;
			padding: 0 43.33rpx;
			margin-top: 93.33rpx;
			position: relative;
			
			.item{
				background: #fff;
				padding: 26.66rpx 0;
				text-align: center;
				border-radius: 6.66rpx;
				box-shadow: 6.66rpx 6.66rpx 13.33rpx rgba(0, 0, 0, .4);
				min-height: 333.33rpx;
				width: 35%;
				overflow: hidden;
				.con{
					
				}
				
				.avatar{
					margin: 0 auto;
					width: 113.33rpx;
					height: 113.33rpx;
					border-radius: 50%;
					background: #e6e6e6;
					border: 0.66rpx soid #d4d4d4;
					image {
						border-radius: 50%;
					}
				}
				.name{
					margin-top: 20rpx;
					font-size: 25rpx;
				}
				.text{
					margin: 20rpx;
					color: #9b9b9b;
					font-size: 25rpx;
				}
				.iconhuaban66{
					font-size: 50rpx;
				}
				.digit{
					font-size: 10prx;
				}
				&:nth-child(1){
					padding: 26.66rpx 10rpx;
					position: absolute;
					top: -20rpx;
					left: 50%;
					transform: translate(-50%, 0);
					border-bottom: 0.66rpx solid #dc831d;
					.iconhuaban66,.digit{
						color: #e4af13;
					}
				}
				&:nth-child(2){
					padding-right: 30rpx;
					.iconhuaban66,.digit{
						color: #a8a8a8;
					}

				}
				&:nth-child(3){
					padding-left: 30rpx;
					.iconhuaban66,.digit{
						color: #d2a258;
					}
				}
			}
		}
		.rank-list{
			position: relative;
			z-index: 2;
			background-color: #fff;
			padding: 30rpx 53.33rpx;
			top: -18rpx;
			.item{
				display: flex;
				padding: 16.66rpx 0;
			}
			.digit{
				width: 56.66rpx;
			}
			.user {
				flex: 1;
				position: relative;
				padding-left: 56.66rpx;
				height: 46.66rpx;
				overflow: hidden;
			
				.avatar {
					position: absolute;
					left: 0;
					top: 0;
					width: 46.66rpx;
					height: 46.66rpx;
					border-radius: 50%;
					background: #e6e6e6;
					border: 0.66rpx soid #d4d4d4;
			
					image {
						border-radius: 50%;
					}
				}
			}
			
			.great {
				width: 180rpx;
				justify-self: right;
			}
		}
	}
	// common.css
	.ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
// 日历
.calendar {
	background: #fff;
	.sign-everyday {
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(223, 223, 223, 0.4);
		.sign-everyday-title {
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}
		.sign-num-box {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			.sign-num {
				font-weight: 600;
				color: #e3ad5b;
				padding: 0 10rpx;
			}
		}
	}
	// 年月日
	.bar {
		height: 100rpx;
		.date {
			font-weight: 600;
		}
	}
	// 星期
	.week {
		.week-item {
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			flex: 1;
		}
	}
	// 日历表
	.myDateTable {
		display: flex;
		flex-wrap: wrap;
		.dateCell {
			width: (610rpx/7);
			height: 80rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			.cell {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}

.is-sign {
	width: 40rpx;
	height: 40rpx;
	background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
	border-radius: 50%;
	box-shadow: 0 0 4rpx 4rpx rgba(#e3ad5b, 0.4);
	color: #fff;
}	
</style>
